<template>
    <div>
        <section class="searchBox">
            <van-search
                    v-model="value"
                    shape="round"
                    show-action
                    background="#4fc08d"
                    label="寻找ui"
                    placeholder="请输入搜索关键词#,或者数字"
                    @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch(value)" style="color: #fff">
                        搜索
                    </div>
                </template>
            </van-search>
            <p>您搜索的是：{{kValue}}</p>
        </section>
        <div class="room">

            <section class="mobile" ref="mobile" v-if="list.length>0">
                <div
                        v-for="(item,k) in list"
                        :key="k"
                        class="li"
                >
                    <component
                            :is="item.key"
                            v-bind="mockMap[item.key]"
                    />
                </div>
            </section>
            <section class="pc" v-if="list.length>0">
                <div
                        v-for="(item,k) in list"
                        :key="k"
                        class="li"
                >
                    <component
                            :is="item.key"
                            v-bind="mockMap[item.key]"
                    />
                </div>
            </section>
            <section class="meta" v-if="list.length>0">
                <div
                        v-for="(item,k) in list"
                        :key="k"
                        class="li"
                        @click="openItem(list[k])"
                        :style="{height:list2[k]+'px'}"
                >
                    {{item.key}}
                    {{transform(item.word)}}
                </div>
            </section>
        </div>

    </div>
</template>
<script>
    import { Toast } from 'vant'

    import search,{keywordList,mockMap} from '@/service/search'

    export default {
        data () {
            return {
                tValue: '',
                kValue: '',
                value: this.$route.query.q,
                mockMap: mockMap,
                keywordList:keywordList,
                list:[],
                list2:[],
            }
        },
        created () {
            let value=this.value
            this.tValue=value.replace(/\d/g,function (d) {
                return '#'.repeat(d)+','
            })

            this.kValue=this.tValue.replace(/#+/g,function(m){
                return '1行'+m.length+'列'
            })
            const list=search.getList(this.tValue)

            this.list=list.map(function (item) {
                const keyword=keywordList[item[0]]
                const obj={
                    key:'',
                    word:'',
                }
                keyword.replace(/(\w+-\w+)(.+)/,function (m,p1,p2) {
                    obj.key=p1
                    obj.word=p2
                })
                return obj;
            })
        },

        mounted(){
            setTimeout( ()=> {
               this.renderList2()
                setTimeout( ()=> {
                    this.renderList2()
                },1000)
            },100)
        },
        methods: {
            renderList2(){
                const list2=[]
                for(let i=0;i<this.$refs.mobile.children.length;i++){
                    const el=this.$refs.mobile.children[i]
                    list2.push(el.offsetHeight)
                }
                this.list2=list2
            },
            transform(val){
                return val.replace(/#+/g,function(m){
                    return '1行'+m.length+'列'
                })
            },
            openItem(item){
                this.$router.push({
                    path: '/ui/'+item.key
                })
            }
        }
    }
</script>
<style  type="text/css" lang="less" scoped>
    .room{
        padding: 20px 20Px 0;
        display: flex;
    }
    .searchBox>p {
        margin:0 20Px;
        font-weight: 400;
        color: #1f2f3d;
        font-size: 28px;
        line-height: 36px;
    }
    .mobile{
        box-shadow: 0Px 4Px 12Px 4Px #ddd;
        width: 375Px;
        min-height: 667Px;
        background-color: #f7f8fa;
        margin-right: 40px;
        .li{

        }
    }
    .pc{
        box-shadow: 0Px 4Px 12Px 4Px #ddd;
        min-height: 667Px;
        background-color: #f7f8fa;
        flex: 1;
        margin-right: 40px;
        .li{

        }
    }
    .meta{
        width: 300Px;
        background: #fff;
        .li{
            cursor: pointer;
        }
        .li:hover{
            background: #ddd;
        }
    }
</style>
